<template>
  <div class="app-container">
    <!-- 搜索区域-->
    <el-row>
      <el-form ref="form" :model="queryParams" label-width="80px">
        <el-col :span="6">
          <el-form-item label="生产主体">
            <el-input v-model="queryParams.productionEntity" size="small"
                      placeholder="请输入生产主体"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="省">
            <el-input v-model="queryParams.province" size="small"
                      placeholder="请输入省"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="市">
            <el-input v-model="queryParams.city" size="small"
                      placeholder="请输入市"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="区">
            <el-input v-model="queryParams.districtCounty" size="small"
                      placeholder="请输入区"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="0" style="margin-left: 20px">
            <el-button type="primary" icon="el-icon-search" size="small" style="margin-right: 10px" @click="getPage">搜索</el-button>
            <el-button type="primary" icon="el-icon-add" size="small" style="margin-right: 10px" @click="add">新增</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-button type="primary" icon="el-icon-download" size="medium" style="margin-right: 10px" @click="handleExport">导出</el-button>
        <el-button type="danger" icon="el-icon-delete" size="medium" @click="BatchDelete">批量删除</el-button>
      </el-col>
    </el-row>
    <!-- 表格区域-->
    <el-row style="margin-top: 20px">
      <el-col :span="24">
        <!--border:当布尔属性默认值为false时，显式的使用该属性，就表示设置该属性为true-->
        <el-table :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column prop="inspectionDepartment" label="检查部门" align="center"></el-table-column>
          <el-table-column prop="inspector" label="检查人员" align="center"></el-table-column>
          <el-table-column prop="productionEntity" label="生产主体" align="center"></el-table-column>
          <el-table-column prop="legalPersonName" label="法人名称" align="center"></el-table-column>
          <el-table-column prop="contactNumber" label="联系电话" align="center"></el-table-column>
          <el-table-column prop="province" label="省" align="center"></el-table-column>
          <el-table-column prop="city" label="市" align="center"></el-table-column>
          <el-table-column prop="districtCounty" label="区/县" align="center"></el-table-column>
          <el-table-column prop="town" label="镇/乡" align="center"></el-table-column>
          <el-table-column prop="inspectionLocation" label="检查地点" align="center"></el-table-column>
          <el-table-column prop="productName" label="产品名称" align="center"></el-table-column>
          <el-table-column prop="isLicenseValid" label="合格证开具是否规范" align="center">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.isLicenseValid == 1">合格</el-tag>
              <el-tag type="danger" v-else-if="scope.row.isLicenseValid == 0">不合格</el-tag>
              <el-tag type="info" v-else>错误</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="isPesticideUsedCorrectly" label="是否使用禁限用农药，兽药" align="center">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.isPesticideUsedCorrectly == 1">合格</el-tag>
              <el-tag type="danger" v-else-if="scope.row.isPesticideUsedCorrectly == 0">不合格</el-tag>
              <el-tag type="info" v-else>错误</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="inspectionOpinion" label="检查意见" align="center"></el-table-column>
          <el-table-column prop="inspectionRecordPhoto" label="检查记录照片" align="center">
            <template slot-scope="scope">
              <image-preview src="https://www.quazero.com/uploads/allimg/140305/1-140305131415.jpg" width="50" height="80"/>
            </template>
          </el-table-column>
          <el-table-column prop="inspectionTime" label="检查时间" align="center"></el-table-column>
          <el-table-column fixed="right" label="操作" width="100" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="openDialog(scope.row)">编辑</el-button>
              <el-button type="text" size="small" style="color:red" @click="deleteById(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!--     编辑弹窗区域：一般用于新增或编辑弹窗-->
    <el-dialog title="编辑检查记录" :visible.sync="dialogVisible" width="30%">
      <!--添加表单组件-->
      <el-form ref="updateForm" :model="editObjects" label-width="100px">
        <el-form-item label="检查人员">
          <el-input v-model="editObjects.inspector" placeholder="请输入检查人员"></el-input>
        </el-form-item>
        <el-form-item label="检查部门">
          <el-input v-model="editObjects.inspectionDepartment" placeholder="请输入检查部门"></el-input>
        </el-form-item>
        <el-form-item label="主体名称">
          <el-input v-model="editObjects.productionEntity" placeholder="请输入主体名称"></el-input>
        </el-form-item>
        <el-form-item label="法人">
          <el-input v-model="editObjects.legalPersonName" placeholder="请输入法人名称"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="editObjects.contactNumber" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="检查产品">
          <el-input v-model="editObjects.productName" placeholder="请输入检查产品"></el-input>
        </el-form-item>
        <el-form-item label="检查地点">
          <el-input v-model="editObjects.inspectionLocation" placeholder="请输入检查地点"></el-input>
        </el-form-item>
        <el-form-item label="检查时间">
          <el-date-picker
            v-model="editObjects.inspectionTime"
            type="datetime"
            placeholder="请选择检查时间"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="检查意见">
          <el-input v-model="editObjects.inspectionOpinion" placeholder="请输入检查意见"></el-input>
        </el-form-item>
        <!-- 合格证开具是否规范 -->
        <el-form-item label="合格证开具是否规范" >
          <el-select v-model="editObjects.isLicenseValid" placeholder="请选择">
            <el-option label="合格" :value="1">合格</el-option>
            <el-option label="不合格" :value="0">不合格</el-option>
          </el-select>
        </el-form-item>

        <!-- 是否使用禁限用农药 -->
        <el-form-item label="是否使用禁限用农药" >
          <el-select v-model="editObjects.isPesticideUsedCorrectly" placeholder="请选择">
            <el-option label="合格" :value="1">合格</el-option>
            <el-option label="不合格" :value="0">不合格</el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <!--对话框底部按钮组，固定代码结构-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitData">确 定</el-button>
      </span>
    </el-dialog>

    <!--     新增弹窗区域：一般用于新增或编辑弹窗-->
    <el-dialog title="新增检查记录" :visible.sync="adddialogVisible" width="30%">
      <!--添加表单组件-->
      <el-form ref="addForm" :model="addObjects" label-width="100px">
        <el-form-item label="检查人员">
          <el-input v-model="addObjects.inspector" placeholder="请输入检查人员"></el-input>
        </el-form-item>
        <el-form-item label="检查部门">
          <el-input v-model="addObjects.inspectionDepartment" placeholder="请输入检查部门"></el-input>
        </el-form-item>
        <el-form-item label="主体名称">
          <el-input v-model="addObjects.productionEntity" placeholder="请输入主体名称"></el-input>
        </el-form-item>
        <el-form-item label="法人">
          <el-input v-model="addObjects.legalPersonName" placeholder="请输入法人名称"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="addObjects.contactNumber" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="检查产品">
          <el-input v-model="addObjects.productName" placeholder="请输入检查产品"></el-input>
        </el-form-item>
        <el-form-item label="检查地点">
          <el-input v-model="addObjects.inspectionLocation" placeholder="请输入检查地点"></el-input>
        </el-form-item>
        <el-form-item label="检查时间">
          <el-date-picker
            v-model="addObjects.inspectionTime"
            type="datetime"
            placeholder="请选择检查时间"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="检查意见">
          <el-input v-model="addObjects.inspectionOpinion" placeholder="请输入检查意见"></el-input>
        </el-form-item>
        <!-- 合格证开具是否规范 -->
        <el-form-item label="合格证开具是否规范" >
          <el-select v-model="addObjects.isLicenseValid" placeholder="请选择">
            <el-option label="合格" :value="1">合格</el-option>
            <el-option label="不合格" :value="0">不合格</el-option>
          </el-select>
        </el-form-item>

        <!-- 是否使用禁限用农药 -->
        <el-form-item label="是否使用禁限用农药" >
          <el-select v-model="addObjects.isPesticideUsedCorrectly" placeholder="请选择">
            <el-option label="合格" :value="1">合格</el-option>
            <el-option label="不合格" :value="0">不合格</el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <!--对话框底部按钮组，固定代码结构-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="adddialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="insertData">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分页区域-->
    <el-row>
      <el-col :span="24" style="margin-top: 20px" align="center">
        <el-pagination layout="prev, pager, next" @current-change="getPageByPageNum" :page-size="queryParams.pageSize"   :total="total" :current-page="queryParams.pageNum"></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { listNjtJobPlatform, updateNjtJobPlatform,deleteNjtJobPlatform, addNjtJobPlatform, batchDeleteNjtJobPlatform} from "@/api/njt/job/platform"
export default {
  name: "XXX",
  data() {
    return {
      selectedIds: [],
      // inspectionTime: [],
      queryParams: {
        pageNum:1,
        pageSize:5,
        productionEntity: "",// 主体名称
        province: "",// 省
        city: "", // 市
        districtCounty: "" ,// 区
        inspectionTime: [],
        isLicenseValid: undefined, // 合格证开具是否规范
        isPesticideUsedCorrectly: undefined // 是否使用禁限用农药
      },
      /** 切换搜索区域内容 */
      toggleContent: false, // 默认隐藏，值为true时显示
      tableData:[
        {
        }
      ],
      /** 数据总条数 */
      total:56,
      /** 编辑对话框控制 */
      dialogVisible: false,// 默认不显示对话框
      /** 新增对话框控制 */
      adddialogVisible: false,// 默认不显示对话框
      /** 编辑对话框绑定对象 */
      editObjects:{
        "productionEntity": "",// 主体名称
        "contactNumber": "",// 注册手机号码
        "legalPersonName": "",// 法人名称
        "inspector": "",// 检查人员
        "inspectionDepartment": "",// 检查部门
        "productName": "",// 检查产品
        "inspectionLocation": "",// 检查地点
        "inspectionTime": "",// 检查时间
        "inspectionOpinion": "",// 检查意见
        "isLicenseValid": undefined, // 合格证开具是否规范
        "isPesticideUsedCorrectly": undefined // 是否使用禁限用农药
      },
      editFileList: [],
      dialogImageUrl: '',
      /** 新增对话框绑定对象 */
      addObjects:{
        "productionEntity": "",// 主体名称
        "contactNumber": "",// 注册手机号码
        "legalPersonName": "",// 法人名称
        "inspector": "",// 检查人员
        "inspectionDepartment": "",// 检查部门
        "productName": "",// 检查产品
        "inspectionLocation": "",// 检查地点
        "inspectionTime": "",// 检查时间
        "inspectionOpinion": "",// 检查意见
        "isLicenseValid": undefined, // 合格证开具是否规范
        "isPesticideUsedCorrectly": undefined // 是否使用禁限用农药
      }
    }

  },

  created() {
    this.getPage()
  },
  methods: {
    handleSelectionChange(selection) {
      // selection 是选中的行数据数组，从中提取 id 存入 selectedIds
      this.selectedIds = selection.map(item => item.id);
    },
    BatchDelete() {
      // 1. 校验是否选中数据
      if (this.selectedIds.length === 0) {
        this.$modal.msgWarning("请先勾选要删除的记录！"); // 复用现有弹窗组件
        return;
      }

      // 2. 二次确认删除（避免误操作）
      this.$confirm("确认要删除选中的 " + this.selectedIds.length + " 条记录吗？", "提示", {
        type: "warning"
      }).then(() => {
        // 3. 调用后端批量删除接口（需新增 api 方法）
        batchDeleteNjtJobPlatform(this.selectedIds).then(response => {
          this.$modal.msgSuccess(response.msg); // 删除成功提示
          this.getPage(); // 重新加载表格数据
          this.selectedIds = []; // 清空选中状态
        }).catch(error => {
          this.$modal.msgError("删除失败：" + (error.msg || "网络异常"));
        });
      }).catch(() => {
        // 取消删除时的回调（可选，无需操作）
      });
    },

    // 文件导出
    handleExport(){
      this.download('nongjt/jobPlatform/export', {
        ...this.queryParams
      }, `user_${new Date().getTime()}.xlsx`)
    },
    deleteById(row) {
      this.$confirm("确认要删除该生产主体吗？", "提示", {
        type: "warning"
      }).then(() => {
        deleteNjtJobPlatform(row.id).then(response => {
          this.$modal.msgSuccess(response.msg)
          this.getPage()
        })
      }).catch(() => {})
    },
    /** 编辑弹窗确定 */
    submitData(){
      updateNjtJobPlatform(this.editObjects).then(response => {
        this.getPage()
        this.$modal.msgSuccess(response.msg)
        this.dialogVisible = false;
      })
    },
    /** 新增弹窗确定 */
    insertData(){
      addNjtJobPlatform(this.addObjects).then(response => {
        this.getPage()
        this.$modal.msgSuccess(response.msg)
        this.adddialogVisible = false;
      })
    },
    /** 分页页码切换 */
    getPageByPageNum(num) {
      this.queryParams.pageNum = num
      this.getPage()
    },
    /** 分页查询方法 */
    getPage() {
      listNjtJobPlatform(this.queryParams).then(response => {
        this.tableData = response.rows
        this.total = response.total
      })
    },
    /** 切换搜索内容显示/隐藏方法 */
    toggleContentHandle() {
      this.toggleContent = !this.toggleContent
    },
    /** 打开编辑对话框方法 */
    openDialog(objData){
      console.log(objData)
// 将数据设置给弹窗绑定对象属性
// this.editObjects = objData // 不能直接赋值，因为这样会出现深拷贝问题，也就是会将引用赋值给对象
// 使用浅拷贝思想，只将值赋值给对象，不赋值引用（避免在弹窗确定前，表格数据跟随弹窗变化）
      Object.assign(this.editObjects,objData)
      this.dialogVisible = true;
    },
    /** 添加方法 */
    add(addobjData) {
      console.log(addobjData)
      Object.assign(this.addObjects,addobjData)
      this.adddialogVisible = true;
    }
  }
}
</script>
